<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="main" style="width:600px;height:400px"></div>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script type="text/javascript">
            var option = {
                title: {
                    text: '示例'
                }, 
                tooltip: {}, 
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: []
                }, 
                yAxis: {}, 
                series: [{
                    name: '销量', 
                    type: 'bar', 
                    data: []
                }]

            }
            let script = document.createElement('script');
            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js'
            script.onload = () => {
                // Plotly.plot(TESTER, data, layout)
                getData1().then(resp => {
                    let data = resp.data
                    var mycharts = echarts.init(document.getElementById('main'))
                    option.xAxis.data = data.x
                    option.series[0].data = data.y
                    mycharts.setOption(option)
                })
            }
            document.body.insertBefore(script, document.getElementsByTagName('script')[0])
            // Plotly.plot(TESTER, data, layout)

            
            function getData1() {
                return axios.get('http://127.0.0.1:5000/getdata/')
            }


            async function request() {
                // let { data: data1 } = await getData1()
                let data = await getData1().then(resp => resp.data)
                return data
            }

        </script>
    </body>
</html>